<template>
  <div>
    <el-divider>财务信息</el-divider>
    <el-form size="small" label-width="70px" :disabled="isAudit">
      <el-row type="flex" :gutter="20" align="middle">
        <el-col :span="6">
          <el-form-item label="一次收费">
            <el-input v-model="reportCommonObj.financeOneCharge">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="一次时间">
            <el-date-picker
              v-model="reportCommonObj.financeOnePayTime"
              value-format="timestamp"
              style="width: 100%"
              type="date"
              placeholder="选择日期"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="二次收费">
            <el-input v-model="reportCommonObj.financeTwoCharge">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="二次时间">
            <el-date-picker
              v-model="reportCommonObj.financeTwoPayTime"
              value-format="timestamp"
              style="width: 100%"
              type="date"
              placeholder="选择日期"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="三次收费">
            <el-input v-model="reportCommonObj.financeThreeCharge">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="三次时间">
            <el-date-picker
              v-model="reportCommonObj.financeThreePayTime"
              value-format="timestamp"
              style="width: 100%"
              type="date"
              placeholder="选择日期"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" :gutter="20" align="middle">
        <el-col :span="6">
          <el-form-item label="到账金额">
            <el-input v-model="reportCommonObj.financeArrivalAmount">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="到账时间">
            <el-date-picker
              v-model="reportCommonObj.financePayDate"
              value-format="timestamp"
              style="width: 100%"
              type="date"
              placeholder="选择日期"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" :gutter="20" align="middle">
        <el-col :span="6">
          <el-form-item label="开票金额">
            <el-input v-model="reportCommonObj.financeBillCharge">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="票据情况">
            <el-select v-model="reportCommonObj.financeBillStatus" style="width: 100%">
              <el-option label="发票" :value="1" />
              <el-option label="收据" :value="2" />
              <el-option label="无票" :value="3" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="开票时间">
            <el-date-picker
              v-model="reportCommonObj.financeBillDate"
              value-format="timestamp"
              style="width: 100%"
              type="date"
              placeholder="选择日期"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" :gutter="20" align="middle">
        <el-col :span="12">
          <el-form-item label="开票信息">
            <el-input v-model="reportCommonObj.financeTicketInformation" type="textarea" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注">
            <el-input v-model="reportCommonObj.financeRemark" type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" :gutter="20" align="middle">
        <el-col :span="6">
          <el-button type="primary" size="small" @click="financeRecordDialogVisibleOpenHandler">票据记录</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-dialog
      title="提示"
      :visible.sync="financeRecordDialogVisible"
      destroy-on-close
      width="50%"
      :before-close="financeRecordDialogVisibleBeforeCloseHandler"
    >
      <el-button type="success" size="small" @click="addFinanceRecordDialogOpenHandler">添加记录</el-button>
      <el-table :data="financeRecordList">
        <el-table-column label="票据情况">
          <template v-slot="scope">
            {{ scope.row.billStatus }}
          </template>
        </el-table-column>
        <el-table-column label="开票人员">
          <template v-slot="scope">
            {{ scope.row.cashier }}
          </template>
        </el-table-column>
        <el-table-column label="开票时间" prop="chargeTime" :formatter="tableTimeFormat" />
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button type="text" size="small" @click="updateFinanceRecordDialogOpenHandler(scope.row.id)">编辑</el-button>
            <el-button type="text" size="small" @click="deleteFinanceRecordHandle(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog
      title="提示"
      :visible.sync="addFinanceRecordDialogVisible"
      destroy-on-close
      width="30%"
      :before-close="addFinanceRecordDialogVisibleBeforeCloseHandler"
    >
      <el-form size="small" :model="financeRecordObj">
        <el-form-item label="票据情况">
          <el-select v-model="financeRecordObj.billStatus" style="width: 100%">
            <el-option
              v-for="item in bill"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <!--        <el-form-item label="收费金额">-->
        <!--          <el-input-number v-model="financeRecordObj.chargePrice" :min="0" :precision="2" :step="0.01" /> 元-->
        <!--        </el-form-item>-->
        <el-form-item label="开票时间">
          <el-date-picker
            v-model="financeRecordObj.chargeTime"
            value-format="timestamp"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addOrUpdateFinanceRecord">保存</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { parseTime } from '@/utils'
import {
  addFinanceRecord,
  deleteFinanceRecord,
  getFinanceRecordById,
  getFinanceRecordPage,
  updateFinanceRecord
} from '@/api/finance'
import { mapGetters } from 'vuex'

export default {
  name: 'FinanceInfo',
  props: {
    reportCommonObj: {
      type: Object,
      required: true
    },
    isAudit: {
      type: Boolean,
      default: false,
      required: true
    }
  },

  data() {
    return {
      payTime: '',
      onePayTime: '',
      twoPayTime: '',
      threePayTime: '',
      billTime: '',
      payStandard: 'fdc',

      financeRecordDialogVisible: false,

      financeRecordList: [],

      addFinanceRecordDialogVisible: false,

      financeRecordObj: {},

      bill: [{
        value: '发票',
        label: '发票'
      }, {
        value: '收据',
        label: '收据'
      }, {
        value: '无票',
        label: '无票'
      }],
      value: ''
    }
  },
  computed: {
    ...mapGetters([
      'id'
    ])
  },
  methods: {
    calculatePay(standerPay, type) {

    },

    calculateDiscountHandler(val) {
      this.reportCommonObj.discount = val
    },

    financeRecordDialogVisibleBeforeCloseHandler() {
      this.financeRecordDialogVisible = false
    },

    financeRecordDialogVisibleOpenHandler() {
      this.getFinanceRecordPage()
      this.financeRecordDialogVisible = true
    },

    getFinanceRecordPage() {
      const id = this.$route.query.id
      getFinanceRecordPage(id).then(res => {
        this.financeRecordList = res.data.list
      })
    },

    addFinanceRecordDialogOpenHandler() {
      this.financeRecordObj = {}
      this.addFinanceRecordDialogVisible = true
    },

    addFinanceRecordDialogVisibleBeforeCloseHandler() {
      this.addFinanceRecordDialogVisible = false
    },

    updateFinanceRecordDialogOpenHandler(id) {
      getFinanceRecordById(id).then(res => {
        this.financeRecordObj = res.data.obj
        this.addFinanceRecordDialogVisible = true
      })
    },

    deleteFinanceRecordHandle(id) {
      this.$confirm('此操作将删除收费记录', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        deleteFinanceRecord(id).then(res => {
          this.$message.success(res.message)
          this.getFinanceRecordPage()
        })
      })
    },

    addOrUpdateFinanceRecord() {
      const financeRecordObj = this.financeRecordObj
      financeRecordObj.reportId = this.$route.query.id
      financeRecordObj.cashier = this.id
      if (financeRecordObj.id) {
        // 修改
        updateFinanceRecord(financeRecordObj).then(res => {
          this.$message.success(res.message)
          this.getFinanceRecordPage()
        })
      } else {
        // 新增
        addFinanceRecord(financeRecordObj).then(res => {
          this.$message.success(res.message)
          this.getFinanceRecordPage()
        }).finally(() => {
          this.financeRecordObj = {}
        })
      }
    },

    tableTimeFormat(row, column, cellValue, index) {
      return parseTime(cellValue, '')
    }
  }
}
</script>

<style scoped>

</style>
